<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="renderer" content="webkit" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>商品管理</title>
  <link rel="stylesheet" href="../../lib/css/reset.min.css">
  <link rel="stylesheet" href="../../css/all.min.css">
  <link rel="stylesheet" href="../../lib/css/elementui.min.css">
</head>

<body>
  <div class="app-wrap" v-cloak id="goods">
    <header-top></header-top>
    <header-search-global type="首页"></header-search-global>
    <common-top-nav></common-top-nav>
    <div class="bg-gray">
      <div class="container userCenter clear">
        <leftnav></leftnav>
        <div class="user-content goods-content">
          <ul class="tabs">
            <li class="li-tab" v-for="(item,index) in goodsParam" @click="toggleTabs(index)" :class="{active:index!=nowIndex}">
              <span>{{item}}</span>
            </li>
          </ul>
          <div class="divTab" v-show="nowIndex===0">
            <form action="#" class="goodsType-form">
              <el-input v-model="ruleForm.input" placeholder="商品名称"></el-input>
              <el-select v-model="options1Index" @change="chooseOptions1(options1Index)" style="margin-right: 15px;">
                <el-option v-for="item,index in options1" :key="item.id" :label="item.name" :value="index">
                </el-option>
              </el-select>

              <el-select v-model="options2Index">
                <el-option v-for="item,index in options2" :key="item.id" :label="item.name" :value="index">
                </el-option>
              </el-select>
              <div class="block">
                <span class="demonstration">添加时间：</span>
                <el-date-picker v-model="value1" type="date" placeholder="选择日期">
                </el-date-picker>
                <span class="line">-</span>
                <el-date-picker v-model="value2" align="right" type="date" placeholder="选择日期">
                </el-date-picker>
              </div>
              <button class="search_btn" @click="aa">搜索</button>
              <button class="shelves">发布商品</button>
              <button class="shelves">一键上架</button>
            </form>
            <div class="goods_table">
              <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
                <el-table-column type="selection" width="50">
                </el-table-column>
                <el-table-column type="index" label="序号" width="50"></el-table-column>
                <el-table-column prop="goodsNumber" label="商品编号" width="80"></el-table-column>
                <el-table-column prop="goodsName" label="商品名称" width="180"></el-table-column>
                <el-table-column prop="goodsCompanyCategory.name" label="商品分类" width="85"></el-table-column>
                <el-table-column prop="goodsStock" label="库存" width="85"></el-table-column>
                <el-table-column prop="goodsPrice" label="商品基础价" width="100"></el-table-column>
                <el-table-column prop="createTime" label="发布时间" width="155"></el-table-column>
                <el-table-column label="操作" width="160">
                    <template slot-scope="scope">
                        <el-button type="text" size="small">上架</el-button>
                        <el-button type="text" size="small">查看</el-button>
                        <el-button type="text" size="small">修改</el-button>
                        <el-button type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
              </el-table>
            </div>
            <common-page :current="1" :all="total" @btn-click="getPage"></common-page>
          </div>
          <div class="divTab" v-show="nowIndex===1">
            <form action="#" class="goodsType-form">
              <el-input v-model="input" placeholder="商品名称"></el-input>
              <el-select v-model="value" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
              <div class="block">
                <span class="demonstration">添加时间：</span>
                <el-date-picker v-model="value1" type="date">
                </el-date-picker>
                <span class="line">-</span>
                <el-date-picker v-model="value2" align="right" type="date">
                </el-date-picker>
              </div>
              <button class="search_btn">搜索</button>
              <button class="shelves">一键下架</button>
            </form>
            <div class="goods_table">
              <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
                <el-table-column type="selection" width="50">
                </el-table-column>
                <el-table-column type="index" label="序号" width="50"></el-table-column>
                <el-table-column prop="goodsNumber" label="商品编号" width="80"></el-table-column>
                <el-table-column prop="goodsName" label="商品名称" width="180"></el-table-column>
                <el-table-column prop="goodsCompanyCategory.name" label="商品分类" width="85"></el-table-column>
                <el-table-column prop="goodsStock" label="库存" width="85"></el-table-column>
                <el-table-column prop="goodsPrice" label="商品基础价" width="100"></el-table-column>
                <el-table-column prop="createTime" label="发布时间" width="155"></el-table-column>
                <el-table-column label="操作" width="160">
                  <template slot-scope="scope">
                    <el-button type="text" size="small">下架  </el-button>
                    <el-button type="text" size="small">查看</el-button>
                    <el-button type="text" size="small">添加库存</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <common-page :current="1" :all="total" @btn-click="getPage"></common-page>
          </div>
          <div class="divTab" v-show="nowIndex===2">
            <form action="#" class="goodsType-form">
              <el-input v-model="input" placeholder="商品名称"></el-input>
              <el-select v-model="value" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
              <div class="block">
                <span class="demonstration">添加时间：</span>
                <el-date-picker v-model="value1" type="date">
                </el-date-picker>
                <span class="line">-</span>
                <el-date-picker v-model="value2" align="right" type="date">
                </el-date-picker>
              </div>
              <button class="search_btn">搜索</button>
              <button class="shelves">一键上架</button>
            </form>
            <div class="goods_table">
              <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
                <el-table-column type="selection" width="50">
                </el-table-column>
                <el-table-column type="index"label="序号" width="50"></el-table-column>
                <el-table-column prop="goodsNumber" label="商品编号" width="80"></el-table-column>
                <el-table-column prop="goodsName" label="商品名称" width="180"></el-table-column>
                <el-table-column prop="goodsCompanyCategory.name" label="商品分类" width="85"></el-table-column>
                <el-table-column prop="goodsStock" label="库存" width="85"></el-table-column>
                <el-table-column prop="goodsPrice" label="商品基础价" width="100"></el-table-column>
                <el-table-column prop="createTime" label="发布时间" width="155"></el-table-column>
                <el-table-column label="操作" width="160">
                  <template slot-scope="scope">
                    <el-button type="text" size="small">下架  </el-button>
                    <el-button type="text" size="small">查看</el-button>
                    <el-button type="text" size="small">添加库存</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <common-page :current="1" :all="total" @btn-click="getPage"></common-page>
          </div>
        </div>
      </div>
    </div>
    <common-footer></common-footer>
  </div>
  <script src="../../lib/js/vue.js"></script>
  <script src="../../lib/js/elementui.min.js"></script>
  <script src="../../lib/js/axios.min.js"></script>
  <!-- mock 数据 打包发布的时候记得移除 -->
  <script src="../../lib/js/mock.js"></script>
  <script src="../../js/all.min.js"></script>
  <script>
    goods();
  </script>
</body>

</html>